<script>
    $(function() {
        $( "#dialog:ui-dialog" ).dialog( "destroy" );

	$( "#sales-popup" ).dialog({
	    autoOpen: false,
	    height: 300,
	    width: 350,
	    modal: true,
	    buttons: {
		"Create an account": function() {
		},
		Cancel: function() {
		    $( this ).dialog( "close" );
		}
	    },
	    close: function() {
                $( "#sales-popup" ).dialog( "close" );
	    }
	});

	$("#new-sale")
	    .button({
		icons: {
		    primary: "ui-icon-plusthick"
		}
	    })
            .click(function() {
		$( "#sales-popup" ).dialog( "open" );
            });
    });
</script>

<div id="Sales">
  <button id="new-sale"> Sale</button>
</div>
<div id="sales-popup">
  Hello World!!
</div>


<script type="text/javascript" charset="utf-8">
    $(function() {
	/* Data set - can contain whatever information you want */
	var aDataSet = [ ];

	$(document).ready(function() {
	    var oTable;
	    $('#dynamic').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
	    oTable = $('#example').dataTable( {
		"bJQueryUI": true,
		"aaData": aDataSet,
		"sPaginationType": "full_numbers",
		"bProcessing": true,
		"sAjaxSource": "/json_sales",
		"aoColumns": [
		    { "sTitle": "Type" },
		    { "sTitle": "TicketNo" },
		    { "sTitle": "Client" },
		    { "sTitle": "Purchaser"},
		    { "sTitle": "Amount" }
		  /*{ "sTitle": "Engine" },
		    { "sTitle": "Browser" },
		    { "sTitle": "Platform" },
		    { "sTitle": "Version", "sClass": "center" },
		    {
			"sTitle": "Grade",
			"sClass": "center",
			"fnRender": function(obj) {
			    var sReturn = obj.aData[ obj.iDataColumn ];
			    if ( sReturn == "A" ) {
				sReturn = "<b>A</b>";
			    }
			    return sReturn;
			}
		    }*/
		]
	    });

	    $("#example tbody tr").click( function( e ) {
		if ( $(this).hasClass('row_selected') ) {
		    $(this).removeClass('row_selected');
		} else {
		    oTable.$('tr.row_selected').removeClass('row_selected');
		    $(this).addClass('row_selected');
		}
	    });
	});
	/* Get the rows which are currently selected */
	function fnGetSelected( oTableLocal ) {
	    return oTableLocal.$('tr.row_selected');
	}
    });
</script>
<div id="dynamic"></div>
